*{
	margin: 0;
	padding: 0;
	list-style: none;
}

a{
	text-decoration: none;
	color: #FFF;
}

body{
	color: #666;
	text-rendering: optimizeLegibility;
	color: #333;
	margin: 0;
	padding: 0;
	height: 100%;
	position: relative;
	word-wrap: break-word;
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;
	background: url("../images/cloud.png") top center no-repeat;
}

/*mainGreen : #22B273 */

*{
	margin: 0;
	padding: 0;
	font-family: Tahoma, Arial, sans-serif;
}

@font-face{
	font-family: iconFont;
	src: url('../font/entypo-social.ttf');
}

@font-face{
	font-family: PlutoSans;
	src: url('../font/PlutoSansRegular.otf');
}

.icon:before {
    font-family: "iconFont", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -o-transform: scale(1);
    text-rendering: optimizeLegibility;
}

[data-icon]:before {
  font-family: icons; /* BYO icon font, mapped smartly */
  content: attr(data-icon);
  speak: none; /* Not to be trusted, but hey. */
}

.undisplayed{
	display: none !important;
	opacity: 0;
}

.no-scroll{
	overflow: hidden;
}

#whole{
	overflow: hidden;
}

.contentMoveRight{
	-webkit-transform: translate3d(220px, 0, 0);
	-moz-transform: translate3d(220px, 0, 0);
	-ms-transform: translate3d(220px, 0, 0);
	-o-transform: translate3d(220px, 0, 0);
	transform: translate3d(220px, 0, 0);
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#login_wrapper{
	height: 100%;
	width: 100%;
	position: absolute;
	background: rgba(0,0,0,0.8);
	z-index: 999;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;

	#login_form{
		width: 309px;
		height: 339px;
		position: absolute;
		top: 50px;
		left: 50% !important;
		margin: 0 0 0 -155px;
		border-radius: 5px;
		background: #FFF;
		text-align: center;

		#username, #password{
			width: 274px;
			height: 25px;
			border-radius: 5px;
			text-indent: 5px;
			background: #EFEFEF;
			border: none;
			margin: 20px auto;
			display: block;
		}

		#button{
			width: 274px;
			height: 28px;
			border-radius: 5px;
			text-indent: 5px;
			background: #9B005D;
			border: none;
			margin: 20px auto;
			display: block;
			color: #FFF;
			cursor: pointer;
			&:hover{
				background: #75004B;
			}
		}
		a{
			display: inline-block;
			color: #808080;
			font-size: 12px;
			&:hover{
				color: #75004B;
			}
		}

		#logo{
			width: 100%;
			height: 120px;
			background: url("../images/logo.png") center no-repeat;
			background-size: auto 100px;
			margin: 10px auto 33px auto;
		}

		p{
			width: 100%;
			background: #555;
			color: #FFF;
			height: 38px;
			font-size: 14px;
			line-height: 38px;
			border-radius: 5px;
			cursor: pointer;
			&:hover{
				background: #000;
			}
		}
	}
}

#main{
	width: 100%;
	overflow-x: hidden;
	height: 100%;
}

#mainContent{
	width: 100%;
	height: 100%;
	overflow: auto;
	overflow-x: hidden;
}


#menu{
	width: 220px;
	height: 100%;
	overflow-y: auto;
	background: #22B273;
	position: fixed;
	left: -240px;
	z-index: 999;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	-moz-box-shadow: 0 0 10px 3px #000;
	-webkit-box-shadow: 0 0 10px 3px#000;
	box-shadow: 0 0 10px 3px #000;
	font-weight: bold;
	li a{
		width: 100%;
		display: block;
	}
}

.show{
	left: 0px !important;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

#main{
	width: 100%;
	height: 100%;
	background: #FFF;
	position: absolute;
}

header{
	width: 100%;
	background: #22B273;
	position: fixed;
	top: 0;
	height: 44px;
	z-index: 1;
}


.menuButton{
	height: 44px;
	width: 58px;
	line-height: 44px;
	text-align: center;
	color: #FFF;
	font-size: 30px;
	float: left;
	position: absolute;
	left: 0px;
}

#sublogo{
	width: 100%;
	height: 44px;
	background: url("../images/sublogo.png") 21px center no-repeat;
	background-size: 17px 17px;
	text-align: left;
	margin: 0 auto;
	font-size: 18px;
	line-height: 44px;
	text-indent: 44px;
	font-weight: bold;
	color: #FFF;
}

.menuButton:active{
	opacity: 0.5;
}

#menu-wrapper{
}

#menu ul li{
	width: 90%;
	padding-left: 2%;
	border-top: 1px solid #FFF;
	margin: 0 auto;
	height: 47px;
	display: block;
	line-height: 48px;
	color: #FFF;
	font-size: 14px;
	text-indent: 10px;
}

#menu ul li:first-child{
	border: none;
}


#menu ul li:active{
	background: #008F45; 
	color: #FFF !important;
}

.titlel1{
		font-size: 16px;
		color: #22B273;
		font-weight: bold;
		width: 100%;
		border-bottom: 1px solid #C9C9C9;
		padding-bottom: 5px;
		margin-bottom: 15px;
		line-height: 20px;
		text-align: left;
		background: url("../images/global_icon.png") left 0px no-repeat;
		background-size: 18px 18px;
		text-indent: 21px;
		float: left;
		a{
			display: block
		}

		.arrow_left, .arrow_right{
			width: 21px;
			height: 19px;
			background: url("../images/arrow.png");
			background-position: -1px;
			float: right;
			margin: 0 5px;

			&:hover{
				opacity: 0.5;
			}
		}

		.arrow_right{
			background-position: -28px;
		}

	}

	.titlel2{
		font-size: 10px;
		color: #999;
		margin-bottom: 15px;
	}

	.titlel3{
		font-size: 13px;
		margin-bottom: 15px;
		color: #B3B3B3;
		font-weight: bold;
		margin-top: 20px;
		text-align: left;
	}
	.services_item{
				height: 300px;
				width: 220px;			
				border-radius: 5px;
				text-align: center;
				float: left;
				display: block;
				margin-right: 10px;
				.image{
					width: 100%;
					height: 139px;
					border-radius: 5px;
					background: #ebebeb;
					position: relative;
					overflow: hidden;	
					img{
						height: auto;
						width: 100%;
						margin: 0 !important;
					}

					.price{
						background: rgba(34,178,115,0.8);
						height: 28px;
						bottom: 0;
						width: 100%;
						position: absolute;
						color: #FFF;
						font-size: 17px;
						line-height: 28px;
						text-align: center;
						text-shadow: 0px 1px 0px #999;
						font-family: Arial;
						font-weight: bold;
					}
				}

				.name{
					margin-top: 10px;
				}

				.province{
					color: #3FA6F2;
					font-size: 12px;
					font-weight: bold;
					margin-top: 5px;
				}

				.rate{
					text-align: center;
					img{
						display: inline-block;
					}
				}

				.address{
					font-size: 11px;
					margin-top: 5px;
					color: #969696;
				}

				.text{
					color: #3FA6F2;
					font-size: 12px;
					margin-top: 5px;
				}

				.datetime{
					color: #006837;
					font-size: 22px;
					margin-top: 10px;
				}

	}
	.special_deal{
			height: 220px;
			width: 288px;
			border-radius: 5px;
			text-align: center;
			margin-right: 10px;
			display: inline-block;
			.image{
				width: 288px;
				height: 139px;
				border-radius: 5px;
				background: #ebebeb;
				position: relative;
				overflow: hidden;
				img{
					width: 100%;
					margin: 0 !important;
				}

				.price{
					background: rgba(34,178,115,0.8);
					height: 28px;
					bottom: 0;
					width: 100%;
					position: absolute;
					color: #FFF;
					font-size: 17px;
					line-height: 28px;
					text-align: center;
					text-shadow: 0px 1px 0px #999;
					font-family: Arial;
					font-weight: bold;
				}
			}	

			.name{
				font-family: Myriad Pro;
				font-size: 14px;
				color: #666;
				text-align: left;
				margin-top: 10px;
			}

			.info{
				font-family: Myriad Pro;
				font-size: 12px;
				color: #111;
				text-align: left;
			}
		}
		#footer{
		margin-top: 20px;
		width: 100%;
		padding-bottom: 20px;
		border-top: 1px solid #ebebeb;
		background: #FAFAFA;

		#copyright{
			width: 100%;
			text-align: center;
			font-size: 10px;
			margin-top: 10px;
			a{
				display: block;
				width: 24px;
				height: 24px;
			}
			.facebook{
				height:24px;
				width: 24px;
				background: url("../images/social_icon.png") no-repeat;
				background-position: 0;
				display: inline-block;
				margin-top: 10px;
			}

			.twitter{
				height:24px;
				width: 24px;
				background: url("../images/social_icon.png") no-repeat;
				background-position: -35px ;
				display: inline-block;
				margin-top: 10px;
			}

			.share{
				height:24px;
				width: 24px;
				background: url("../images/social_icon.png") no-repeat;
				background-position: -70px;
				display: inline-block;
				margin-top: 10px;
			}

			.rss{
				height:24px;
				width: 24px;
				background: url("../images/social_icon.png") no-repeat;
				background-position: -107px;
				display: inline-block;
				margin-top: 10px;
			}
		}
	}
/* Smart Phone Screen */
@media screen and (max-width: 800px){
	body{
		background: url("../images/cloud.png") center 44px no-repeat;
		background-size: 100% auto;
	}
	#mainContent{
		margin-top: 20px !important;
		img{
			max-width: 100%;
			margin: 5px 0;
			border-radius: 5px;
		}
	}
	
	#logo{
		width: 100%;
		height: 140px;
		background: url("../images/logo.png") center no-repeat;
		margin: 70px auto 20px auto;
	}

	.navigation{
		display: none;
	}

	#searchBar{
		width: 100%;
		height: 370px;
		background: url("../images/search_bg.jpg") center no-repeat;
		background-size: auto 100%;
		position: relative;
		#search_form{
			width: 228px;
			height: 282px;
			background: rgba(255, 255, 255, 0.9);
			position: absolute;
			left: 50%;
			top: 50%;
			margin: -156px 0 0 -124px;
			border-radius: 5px;
			padding: 20px 10px 10px 10px;
			-webkit-box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.7);   
       			box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.7);
			p{
				font-size: 14px;
				margin: 10px auto 5px auto;
				width: 222px;
				text-align:left;
			}

			input{
				width: 226px;
				height: 24px;
				border: 1px solid #C9C9C9;
				border-radius: 5px;
				text-indent: 10px;
			}

			select{
				width: 226px;
				height: 24px;
				border: 1px solid #C9C9C9;
				border-radius: 5px;
			}

			#search_button{
				width: 228px;
				height: 48px;
				background: #3FA6F2;
				font-size: 14px;
				color: #FFF;
				text-shadow: 0px 1px 0px #0071B9;
				margin-top: 20px;
				border: none;
				&:active{
					background: #0071B9;
				}
			}
		}
	}

	#content{
		width: 90%;
		max-width: 740px;
		margin: 0 auto;
		font-size: 12px;
		line-height: 16px;
	}

	#services_wrapper,#rooms{
		width: 100%;
		height: 620px;	
		overflow-x: scroll;
		#services_wrapper_scrollable{
			width: 690px;
			height: 600px;
		}
		
	}
		#hotdeal,#convenience{
			margin: 10px auto;
			text-align: center;
		}
		#special_deal_wrapper{
			width: 100%;
			text-align: center;
		}
	
	#search_form2{
			width: 300px;
			height: 200px;
			background: rgba(255, 255, 255, 0.9);
			padding: 20px 0px 10px 0px;
			margin: 0 auto;
			p{
				font-size: 14px;
				margin:0 20px;
				text-align:left;
				float: left;
				line-height: 28px;

				&:nth-child(1){
					margin-right: 59px;
				}

				&:nth-child(5){
					clear: left;
					margin-right: 25px;
				}
			}

			input{
				width: 178px;
				height: 24px;
				border: 1px solid #C9C9C9;
				border-radius: 5px;
				text-indent: 10px;
				float: left;
			}

			select{
				width: 180px;
				height: 26px;
				border: 1px solid #C9C9C9;
				border-radius: 5px;
				float: left;

				&:nth-child(2),&:nth-child(4){
					margin-bottom: 15px;
				}

			}

			#search_button{
				width: 267px;
				height: 26px;
				background: #3FA6F2;
				font-size: 12px;
				color: #FFF;
				text-shadow: 0px 1px 0px #0071B9;
				border: none;
				cursor: pointer;
				margin: 10px 0 0 20px;
				&:active{
					background: #0071B9;
				}
			}
		}

		.room_result{
		width: 100%;
		min-height: 120px;
		float: left;
		border-bottom: 1px solid #ebebeb;
		padding-bottom: 10px;
		margin-bottom: 10px;
		&:last-child{
		border-bottom: none;	
		
		}

		.image{
			height: 100px;
			width: 150px;
			margin: 10px;
			overflow: hidden;
			border-radius: 5px;
			float: left;
			img{
				height: 100%;
			}
		}

		.info{
			width: 100%;
			min-height: 100px;
			margin: 10px;
			float: left;

			.name{
				width: 100%;
				color: #3FA6F2;
				font-size: 12px;
				font-weight: bold;
				float: left;
			}

			.address{
				font-size: 11px;
				margin-top: 5px;
				color: #666666;
				float: left;
				clear: left;
			}

			.rate{
				width: 90px;
				text-align: center;
				float: left;
				margin-right: 15px;
					img{
						display: inline-block;
					}
			}

			.description{
				width: 100%;
				float: left;
				font-size: 12px;
				margin-top: 5px;
			}

		}

		.price{
			width: 200px;
			height: 44px;
			margin: 10px;
			float: left;
			position: relative;
			text-align: left;
			line-height: 6px;
			font-weight: bold;
			color: green;
			.button{
				display: block;
				width: 190px;
				height: 26px;
				background: #3FA6F2;
				font-size: 12px;
				color: #FFF;
				text-shadow: 0px 1px 0px #0071B9;
				border: none;
				cursor: pointer;
				border-radius: 5px;
				text-align: center;
				line-height: 26px;
				font-weight: bold;
				position: absolute;
				bottom: 0;
				left: 0;
				&:hover{
					background: #0071B9;
				}
			}
		}
	}

	#rooms{
			#services_wrapper_scrollable{
				width: 925px !important;
			}
	}

	#sub_images{
		display: none;
	}

	.pagination{
		text-align: center;
		display: block;
		margin: 20px 0;
		span,a{	
			height: 24px;
			width: 24px;
			display: inline-block;
			background: #3FA9F5;
			border-radius: 50%;
			line-height: 24px;
			text-align: center;
			font-weight: bold;	
			color: #FFF;
		}
		.arrow{
			background: #FFF !important;
			color: #3FA9F5;
		}

		.focus{
			background: #0071BC;
			text-align: center !important;

		}
	}

	#room_details{
			.title{
				font-weight: bold;

			}

			.text1,.text{
				font-weight: bold;
				color: #22B273;
				margin-bottom: 10px;
			}

			.text2{
				margin-bottom: 20px;
			}

		#registration{
			margin-bottom: 20px;
			#date_start, #date_end{
				width: 230px;
				height: 22px;
				border-radius: 5px;
				border: 1px solid #999;
			}

			.button{
				display: block;
				width: 230px;
				height: 32px;
				background: #3FA6F2;
				font-size: 12px;
				color: #FFF;
				text-shadow: 0px 1px 0px #0071B9;
				border: none;
				cursor: pointer;
				border-radius: 5px;
				text-align: center;
				line-height: 26px;
				font-weight: bold;
				&:hover{
					background: #0071B9;
				}
			}
		}
	}

	#register_user{
		width: 100%;
		margin: 0 0 0 12px;
		float: left;
		font-size: 13px;
		#title{
			color: #3FA2EE;
			font-size: 13px;
			font-weight: bold;
			margin-bottom: 10px;
			background: none !important;
		}

		.titlel1{
			float: left;

		}

		.label{
			width: 100%;
			float: left;
			min-height: 28px;
			line-height: 28px;
		}

		.text{
			width: 350px;
			float: left;
			min-height: 28px;

			input{
				float: left;
				width: 230px;
				height: 22px;
				border-radius: 5px;
				border: 1px solid #999;
				text-indent: 5px
			}

			textarea{
				width: 230px;
				height: 70px;
				resize: none;
				border-radius: 5px;
				border: 1px solid #999;
				float: left;
				padding: 5px;
			}

			.checkbox{
				float: left;
				width: 50px;
			}
		}
	}

	#hotel{
		width: 280px;
		height: 170px;
		background: rgba(0,0,0,0.3);
		position: relative;
		overflow: hidden;
		border-radius: 5px;
		margin: 30px auto;
		img{
			height: 120%;
			margin: 0;
		}

		#name{
			width: 100%;
			position: absolute;
			bottom: 25px;
			background: rgba(102,102,102,0.8);
			text-align: center;
			height: 47px;
			line-height: 47px;
			font-size: 20px;
			color: #FFF;
			-webkit-box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.8);
        	box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.8);
        	text-shadow: 0px 1px 0px #000;
        	font-weight: bold;
		}
	}
	#available_rooms{
		text-align: center;
		float: left;
		width: 100%;	
		#booking_room_button{
			display: block;
			width: 300px;
			height: 44px;
			background: #00A69A;
			font-size: 14px;
			color: #FFF;
			text-shadow: 0px 1px 0px #0071B9;
			border: none;
			cursor: pointer;
			border-radius: 5px 5px 0 0;
			text-align: center;
			line-height: 44px;
			font-weight: bold;
			position: fixed;
			bottom: 0;
			left: 50%;
			margin-left: -150px;
			-webkit-box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.8);
        	box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.8);
        	-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out;
        	&:hover{
        		width: 100%;
        		left: 0;
        		margin-left: 0;
        		background: #007F73;
        		-webkit-transition: all 0.5s ease-in-out;
				-moz-transition: all 0.5s ease-in-out;
				-o-transition: all 0.5s ease-in-out;
				transition: all 0.5s ease-in-out;
        	}
		}
		.room{
			width: 270px;
			display: inline-block;
			margin: 0 5px 40px 10px;
			border: 1px solid #ebebeb;
			border-radius: 5px;
			padding: 5px;
			-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
			.image{
				width: 270px;
				height: 175px	;
				border-radius: 5px;
				overflow: hidden;
				margin-bottom: 10px;
				img{
					height: 105%;
				}
			}
		.label{
			width: 130px;	
			float: left;
			min-height: 20px;
			line-height: 20px;
			font-size: 12px;	 
			text-align: left;	
			margin-left: 20px;	
			color: #000;
		}

		.text{
			width: 100px;
			float: left;
			min-height: 20px;
			font-size: 12px;
			text-align: left;	
			line-height: 20px;		
			input{
				float: left;
				width: 100px;
				height: 20px;
				border-radius: 5px;
				border: 1px solid #999;
				text-indent: 5px
			}

			select{
				width: 100px;
				height: 20px;
				resize: none;
				border-radius: 5px;
				border: 1px solid #999;
				float: left;
				padding: 5px;
			}

			.checkbox{
				float: left;
				width: 50px;
			}
		}
		}
	}

	#footer{
		margin-top: 20px;
		width: 100%;
		padding-bottom: 20px;
		border-top: 1px solid #ebebeb;
		background: #FAFAFA;

		#copyright{
			width: 100%;
			text-align: center;
			font-size: 10px;
			margin-top: 10px;
			a{
				display: block;
				width: 24px;
				height: 24px;
			}
			.facebook{
				height:24px;
				width: 24px;
				background: url("../images/social_icon.png") no-repeat;
				background-position: 0;
				display: inline-block;
				margin-top: 10px;
			}

			.twitter{
				height:24px;
				width: 24px;
				background: url("../images/social_icon.png") no-repeat;
				background-position: -35px ;
				display: inline-block;
				margin-top: 10px;
			}

			.share{
				height:24px;
				width: 24px;
				background: url("../images/social_icon.png") no-repeat;
				background-position: -70px;
				display: inline-block;
				margin-top: 10px;
			}

			.rss{
				height:24px;
				width: 24px;
				background: url("../images/social_icon.png") no-repeat;
				background-position: -107px;
				display: inline-block;
				margin-top: 10px;
			}
		}
	}

}

/* Desktop Screen */

@media screen and (min-width: 801px){
	header{
		display: none;
	}

	#logo{
		width: 100%;
		height: 140px;
		background: url("../images/logo.png") center no-repeat;
		margin: 20px auto 30px auto;
	}

	#mainContent{
		width: 1024px;
		margin: auto;
	}
	.navigation{
		width:1000px;
		margin: 0 auto;
		height: 33px;
		font-size: Arial;
		font-size: 13px;
		li{
			float: left;
			margin-right: 10px;
			a{
				color: #808080;
				&:hover{
					border-bottom: 4px solid #00A69A;
					-webkit-transition: all 0.2s ease-in-out;
					-moz-transition: all 0.2s ease-in-out;
					-o-transition: all 0.2s ease-in-out;
					transition: all 0.2s ease-in-out;
				}
			}
		}

		#login_button{
			width: 130px;
			height: 20px;
			line-height: 20px;
			background: #00A69A;
			text-align: center;
			color: #FFF;
			cursor: pointer;
			float: right;
			border-radius: 5px;
			font-size: 10px;
			&:hover{
				background: #007F73;
			}
		}
	}

	#searchBar{
		width: 100%;
		max-width: 1024px;
		height: 370px;
		background: url("../images/search_bg.jpg") center no-repeat;
		background-size: 100% auto;
		position: relative;
		margin: 0 auto 20px auto;
		border-radius: 5px;
		#search_form{
			width: 228px;
			height: 282px;
			background: rgba(255, 255, 255, 0.9);
			position: absolute;
			right: 12px;
			top: 50%;
			margin: -156px 0 0 0;
			border-radius: 5px;
			padding: 20px 10px 10px 10px;
			-webkit-box-shadow:  0px 0px 8px 3px rgba(0, 0, 0, 0.7);     
       			box-shadow:  0px 0px 8px 3px rgba(0, 0, 0, 0.7);
			p{
				font-size: 14px;
				margin: 10px auto 5px auto;
				width: 222px;
				text-align:left;
			}

			input{
				width: 226px;
				height: 24px;
				border: 1px solid #C9C9C9;
				border-radius: 5px;
				text-indent: 10px;
			}

			select{
				width: 226px;
				height: 24px;
				border: 1px solid #C9C9C9;
				border-radius: 5px;
			}

			#search_button{
				width: 228px;
				height: 48px;
				background: #3FA6F2;
				font-size: 14px;
				color: #FFF;
				text-shadow: 0px 1px 0px #0071B9;
				margin-top: 20px;
				border: none;
				&:active{
					background: #0071B9;
				}
			}
		}
	}

	#search_form2{
			width: 704px;
			height: 90px;
			background: rgba(255, 255, 255, 0.9);
			padding: 20px 0px 10px 0px;
			margin: 0 auto 10px auto;
			p{
				font-size: 14px;
				margin:0 20px;
				text-align:left;
				float: left;
				line-height: 28px;

				&:nth-child(1){
					margin-right: 55px;
				}

				&:nth-child(5){
					clear: left;
				}
			}

			input{
				width: 405px;
				height: 24px;
				border: 1px solid #C9C9C9;
				border-radius: 5px;
				text-indent: 10px;
				float: left;
			}

			select{
				width: 150px;
				height: 26px;
				border: 1px solid #C9C9C9;
				border-radius: 5px;
				float: left;

				&:nth-child(2){
					margin-bottom: 20px;
				}

			}

			#search_button{
				width: 150px;
				height: 26px;
				background: #3FA6F2;
				font-size: 12px;
				color: #FFF;
				text-shadow: 0px 1px 0px #0071B9;
				border: none;
				float: left;
				margin-left: 10px;
				cursor: pointer;
				&:active{
					background: #0071B9;
				}
			}
		}

	#khuyenmai{
		float: left;
		width: 690px;

		.services_item{
			margin-right: 15px;
			&:nth-child(3), &:nth-child(6){
				margin-right: 0;		
			}
		}
	}

	#room_details{
		width: 100%;
		height: 470px;
		float: left;
		#gallery{
			width: 480px;
			height: 420px;
			margin-right: 30px;
			float: left;

			#main_image{
				width: 471px;
				height: 286px;
				background: #000;
				border-radius: 5px;
				overflow: hidden;
				img{
					width: 100%;
					margin: 0 !important;
				}
			}

			#sub_images{
				margin-top: 17px;
				width: 471px;		
				height: 286px;
				height: 120px;
				.small_image{
					height: 105px;
					width: 105px;
					margin-right: 17px;
					overflow: hidden;
					border-radius: 5px;
					float: left;
					img{
						height: 100%;
						left: -50px;
					}

					&:last-child{
						margin-right: 0;
					}
				}
			}
		}

		#info{
			width: 510px;
			height: 420px;
			float: left;
			font-size: 14px;
			.title{
				width: 100px;
				float: left;
				text-align: left;
				height: 32px;
				line-height: 32px;
				font-weight: bold;

			}

			.text1,.text,.text2{
				width: 404px;
				float: left;
				min-height: 32px;
				line-height: 32px;

			}

			.text1{
				font-weight: bold;
				color: #22B273;
			}

			.text2{
				line-height: 20px;
				padding-top: 7px;
				font-size: 12px;
				height: 182px;
				overflow-y: scroll;
				white-space: pre-line;
			}
		}

		#registration{
			width: 510px;
			height: 100px;
			float: left;
			margin-top: 18px;
			position: relative;
			#date_start, #date_end{
				width: 230px;
				height: 22px;
				border-radius: 5px;
				border: 1px solid #999;
			}

			.button{
				display: block;
				width: 162px;
				height: 56px;
				background: #3FA6F2;
				font-size: 12px;
				color: #FFF;
				text-shadow: 0px 1px 0px #0071B9;
				border: none;
				cursor: pointer;
				border-radius: 5px;
				text-align: center;
				line-height: 26px;
				font-weight: bold;
				position: absolute;
				top: 46px;
				right: 5px;
				&:hover{
					background: #0071B9;
				}
			}
		}
	}

	.room_result{
		width: 100%;
		min-height: 120px;
		float: left;
		border-bottom: 1px solid #ebebeb;
		padding-bottom: 10px;
		margin-bottom: 10px;
		&:last-child{
		border-bottom: none;	
		
		}

		.image{
			height: 100px;
			width: 150px;
			margin: 10px;
			overflow: hidden;
			border-radius: 5px;
			float: left;
			img{
				height: 100%;
			}
		}

		.info{
			width: 600px;
			min-height: 100px;
			margin: 10px;
			float: left;

			.name{
				width: 100%;
				color: #3FA6F2;
				font-size: 12px;
				font-weight: bold;
				float: left;
			}

			.address{
				font-size: 11px;
				margin-top: 5px;
				color: #666666;
				float: left;
			}

			.rate{
				width: 90px;
				text-align: center;
				float: left;
				margin-right: 15px;
					img{
						display: inline-block;
					}
			}

			.description{
				width: 100%;
				float: left;
				font-size: 12px;
				margin-top: 5px;
			}

		}

		.price{
			width: 200px;
			height: 100px;
			margin: 10px;
			float: left;
			position: relative;
			text-align: center;
			line-height: 95px;
			font-weight: bold;
			color: green;
			.button{
				display: block;
				width: 190px;
				height: 26px;
				background: #3FA6F2;
				font-size: 12px;
				color: #FFF;
				text-shadow: 0px 1px 0px #0071B9;
				border: none;
				cursor: pointer;
				border-radius: 5px;
				text-align: center;
				line-height: 26px;
				font-weight: bold;
				position: absolute;
				bottom: 0;
				left: 5px;
				&:hover{
					background: #0071B9;
				}
			}
		}
	}

	.pagination{
		text-align: center;
		display: block;
		margin: 20px 0;
		span,a{	
			height: 24px;
			width: 24px;
			display: inline-block;
			background: #3FA9F5;
			border-radius: 50%;
			line-height: 24px;
			text-align: center;
			font-weight: bold;	
			color: #FFF;
		}
		.arrow{
			background: #FFF !important;
			color: #3FA9F5;
		}

		.focus{
			background: #0071BC;
			text-align: center !important;

		}
	}

	#rooms{
		width: 100%;
		.services_item{
			margin-right: 48px;
			&:nth-child(4),&:nth-child(8){
				margin-right: 0;
			}	
		}
	}


	.titlel1{
		float: left;
	}

	#hotdeal{
		width: 259px;
		height: 589px;
		float: left;
		margin: 26px 0 0 74px;
		overflow: hidden;
		border-radius: 5px;
		img{
			width: 100%;
		}
	}

	.special_deal{
		width: 315px;
		margin-right: 34px;
		&:last-child{
			margin-right: 0;
		}

		.image{
			width: 315px;
		}
	}

	#register_user{
		width: 500px;
		height: 400px;
		margin: 0 0 0 12px;
		float: left;
		font-size: 13px;
		#title{
			color: #3FA2EE;
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 10px;
		}

		.label{
			width: 140px;
			float: left;
			min-height: 38px;
			line-height: 38px;
		}

		.text{
			width: 350px;
			float: left;
			min-height: 38px;

			input{
				float: left;
				width: 300px;
				height: 22px;
				border-radius: 5px;
				border: 1px solid #999;
				text-indent: 5px
			}

			textarea{
				width: 290px;
				height: 70px;
				resize: none;
				border-radius: 5px;
				border: 1px solid #999;
				float: left;
				padding: 5px;
			}

			.checkbox{
				float: left;
				width: 50px;
			}
		}
	}

	#hotel{
		width: 490px;
		height: 335px;
		background: rgba(0,0,0,0.3);
		float: left;
		position: relative;
		overflow: hidden;
		border-radius: 5px;
		margin-top: 30px;
		img{
			height: 120%;
		}

		#name{
			width: 100%;
			position: absolute;
			bottom: 63px;
			background: rgba(102,102,102,0.8);
			text-align: center;
			height: 47px;
			line-height: 47px;
			font-size: 20px;
			color: #FFF;
			-webkit-box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.8);
        	box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.8);
        	text-shadow: 0px 1px 0px #000;
        	font-weight: bold;
		}
	}

	#available_rooms{
		text-align: center;
		float: left;
		width: 100%;	
		#booking_room_button{
			display: block;
			width: 300px;
			height: 56px;
			background: #00A69A;
			font-size: 14px;
			color: #FFF;
			text-shadow: 0px 1px 0px #0071B9;
			border: none;
			cursor: pointer;
			border-radius: 5px 5px 0 0;
			text-align: center;
			line-height: 56px;
			font-weight: bold;
			position: fixed;
			bottom: 0;
			left: 50%;
			margin-left: -150px;
			-webkit-box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.8);
        	box-shadow:  0px 0px 5px 1px rgba(0, 0, 0, 0.8);
        	-webkit-transition: all 0.5s ease-in-out;
			-moz-transition: all 0.5s ease-in-out;
			-o-transition: all 0.5s ease-in-out;
			transition: all 0.5s ease-in-out;
        	&:hover{
        		width: 100%;
        		left: 0;
        		margin-left: 0;
        		background: #007F73;
        		-webkit-transition: all 0.5s ease-in-out;
				-moz-transition: all 0.5s ease-in-out;
				-o-transition: all 0.5s ease-in-out;
				transition: all 0.5s ease-in-out;
        	}
		}
		.room{
			width: 270px;
			display: inline-block;
			margin: 0 20px 40px 20px;
			border: 1px solid #ebebeb;
			border-radius: 5px;
			padding: 5px;
			-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
			.image{
				width: 270px;
				height: 175px	;
				border-radius: 5px;
				overflow: hidden;
				margin-bottom: 10px;
				img{
					height: 105%;
				}
			}
		.label{
			width: 130px;	
			float: left;
			min-height: 20px;
			line-height: 20px;
			font-size: 12px;	 
			text-align: left;	
			margin-left: 20px;	
			color: #000;
		}

		.text{
			width: 100px;
			float: left;
			min-height: 20px;
			font-size: 12px;
			text-align: left;	
			line-height: 20px;		
			input{
				float: left;
				width: 100px;
				height: 20px;
				border-radius: 5px;
				border: 1px solid #999;
				text-indent: 5px
			}

			select{
				width: 100px;
				height: 20px;
				resize: none;
				border-radius: 5px;
				border: 1px solid #999;
				float: left;
				padding: 5px;
			}

			.checkbox{
				float: left;
				width: 50px;
			}
		}
		}
	}

	#footer{
		float: left;
		.navigation{
			width: 1024px;
			height: 20px;
			margin-top: 10px;
			text-align: center;
			li{	
				float: none;
				display: inline-block;
				margin: 0 5px;
			}
		}
	}

}